import React,{Component} from 'react'
import './App.css'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'

export default class App extends Component{
  state = {todos:[
    {id:'1',name:'吃饭',done:true},
    {id:'2',name:'睡觉',done:true},
    {id:'3',name:'打游戏',done:false}
  ]}
  //添加事情
  addData= (todoObj) =>{
    const newTodos = [todoObj,...this.state.todos]
    this.setState({todos:newTodos})
  }
  //勾选事情
  updateTodo=(id,done) =>{
    const {todos} = this.state
    const newTodo = todos.map((item)=>{
      if(item.id === id) return {...item,done:done}
      else return item
    }) 
    this.setState({todos:newTodo})

  }
  //删除事情
  deleteTodo =(id) =>{
    const {todos} = this.state
    const newTodo = todos.filter((item)=>{
      return id !== item.id
    })
    this.setState({todos:newTodo}) 
  }
  //全选事件
  checkTodo =(done) =>{
    const {todos} = this.state
    const newTodo = todos.map((item)=>{
      return {...item,done}
    })
    this.setState({todos:newTodo})
  }
  //清除完成事件
  clearTodo =()=>{
    const {todos} = this.state
    const newTodo = todos.filter((item)=>{
      return item.done === false
    })
    this.setState({todos:newTodo})
  }
  render(){
    return(
      <div>
        <div className="todo-container">
          <div className="todo-wrap">
            <Header addData={this.addData}/>
            <List todos={this.state.todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
            <Footer todos={this.state.todos} checkTodo={this.checkTodo} clearTodo={this.clearTodo}/>
          </div>
        </div>
      </div>
    )
  }
}


